<template>
  <div class="eatwarp">
   <div class="dt-top">
			<i class="i back icon-arrow_lift" @click="todetail"></i>
			邻桌吃啥
		</div>
    <p v-if="eatfood.length>0">{{tableno}}桌</p>
    <div class="eatcontent">
      <vue-loading v-show="showload" type="bubbles" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>
      <ul v-show="showcontent" v-if="showedcontent(type)" v-for="(type,index) in allfood">
						<li v-for="(food,index1) in allfood[index].list" class="g-in-food" v-show="showedfood(food)" :key="index1" >
							<div class="g-in-icon">
								<img @click="selectFood(food,$event)" :src="food.src | imgurl" />
							</div>
							<div class="g-in-content">
								<h2 class="g-in-name">{{food.listName}}</h2>
								<div class="g-in-price">
									<span class="g-new">￥{{food.listin[0].price}}</span>
									<span class="g-old" v-show="food.oldPrice">￥{{food.listin[0].price}}</span>
								</div>
								<div class="cartwraper">
									<change v-on:cartadd="_drop" v-if="food.listin.length==1" :food="food.listin[0]"></change>
									<div v-else class="specif" @click.stop="tospecif(food)">
										<num :foodtype=food></num>
										选规格
									</div>
								</div>
							</div>
						</li>
					</ul> 
    </div>
    <shopcart v-on:save="saveorder" v-on:chang="selectFoods" :selectFood="selectFoods1" ref="shopcart" :aa="aa"></shopcart>
    <transition name="specif">
	<specif v-if="showspecif" :foodspecif="specif" v-on:changespecif="tospecif"></specif>
	</transition>
  </div>
</template>

<script>
  import qs from "qs"
  	import vueLoading from 'vue-loading-template'
  import shopcart from './shopcart'
  import change from './change'
  import num from './num'
  import specif from './specif'
export default {
  name: 'eat',
  data () {
    return {
      a:1,
      showspecif:false,//是否显示规格界面
      specif:{},
      tableno:'',
      allfood:[],
      eatfood:[],
      showload:true,
      showcontent:false,
      msg: 'Welcome to Your Vue.js App',
      eatedfood:[]
    }
  },
  mounted:function(){
				this.getDate();
		},
  computed:{
    selectFoods1:function(){
				var foodss=[];
				this.allfood.forEach(function(good){
					good.list.forEach(function(food){
						food.listin.forEach(function(foodin){
							if(foodin.num>0){
							foodss.push(foodin);
						}
						})
					});
				});
				return foodss;
			},
      aa:function(){
				return [{
					a:this.a
				}]
			}
  },
  methods:{
    todetail:function(){
			  window.location.href=sessionStorage.mainurl
		  },
    showedcontent:function(data){
      var _this=this
      var flag2=false
      data.list.forEach(function(list){
        _this.eatfood.forEach(ff=>{
          if(ff.commodityNo==list.id){
            flag2=true
          }
        })
      })
      if(flag2){
        return true
      }
    },
    saveorder:function(){
      localStorage.order=JSON.stringify(this.allfood);
      window.location.href = "order2.html"
    },
    getDate:function(){
			var _this=this;
			var da=new Date()
			if(!localStorage.order|| (da.getTime()-localStorage.time)>3600000 || localStorage.sellerid!=sessionStorage.sellerid){
			var _this=this;
			this.$http.post(sessionStorage.baseurl+"/a/phone/getAllInFoods",qs.stringify({sellerid :sessionStorage.sellerid,token:sessionStorage.token,openid:sessionStorage.openid})).then(response => {
				if(response.data.code==1){

				_this.$http.post(sessionStorage.baseurl+"/a/phone/getFoodType",qs.stringify({sellerid :sessionStorage.sellerid,token:sessionStorage.token,openid:sessionStorage.openid})).then(res=>{
					 var allfoods=response.data.data;
					 var foodtype=res.data.data;
					 var order_foodtype=[];
					 var order_allfoods=[]
					 for (var i = 0; i < foodtype.length; i++) {
							order_foodtype.push({
								index : i,
								name : foodtype[i].name,
								num : 0,
								id : foodtype[i].id,
								list : []
							})
						}
						for (var i = 0; i < allfoods.length; i++) {
							if(allfoods[i].foodInfoList){
							for(var z=0;z<allfoods[i].foodInfoList.length;z++){
								allfoods[i].foodInfoList[z].num=0;
								allfoods[i].foodInfoList[z].foodname=allfoods[i].foodname;
							}
							order_allfoods.push({
								id : allfoods[i].id,
								typeid : allfoods[i].foodtype.id,
								listName : allfoods[i].foodname,
								num : 0,
								src : allfoods[i].foodimage1,
								orprice : allfoods[i].foodInfoList[0].price,
								price : allfoods[i].foodInfoList[0].nowprice,
								listin:allfoods[i].foodInfoList
							})
							}
						}
					 order_foodtype.forEach(function(type){
						 order_allfoods.forEach(function(food){
							if(food.typeid==type.id){
								food.listin.forEach(function(foodin){
										foodin.num=0;
										foodin.src=food.src;
								});
								type.list.push(food)
							}
						 })
					 })
					 _this.allfood=order_foodtype;
					 localStorage.order=JSON.stringify(_this.allfood);
					 localStorage.time=da.getTime()
					 localStorage.sellerid=sessionStorage.sellerid
				})
				.catch(function(error){
				alert(error)
			})
				}
				else{
					alert("获取菜品数据出错")
				}
			})
			.catch(function(error){
				alert(error)
			})
		}
		else{
		 this.allfood=JSON.parse(localStorage.order);
	 }
	
          _this.$http.post(sessionStorage.baseurl+"/a/dinedash/findNextEat",qs.stringify({sellerid:sessionStorage.sellerid,tableno:sessionStorage.tableno,openid:sessionStorage.openid,token:sessionStorage.token}))
          .then(res =>{
            if(!res.data.data){
              _this.eatfood=[];
              _this.showload=!_this.showload
          _this.showcontent=!_this.showcontent
              alert("暂无邻桌数据")
              return
            }
						_this.showload=!_this.showload
          _this.showcontent=!_this.showcontent
          
            	
          _this.eatfood=res.data.data.orderFormList;
          _this.tableno=res.data.data.tableno
          })
          .catch(function(error){
				        alert(error)
			    })
		},
    showedfood:function(data){
      var flag=false
      this.eatfood.forEach(ff=>{
        if(ff.commodityNo==data.id){
          flag=true;
          return
        }
      })
      if(flag){
        return true
      }
    },
   /* eatedfoods:function(){
      var _this=this
      var eatedfood=[]
      if(this.eatfood.length==0){
        alert("暂无邻桌数据")
        return
      }
      this.allfood.forEach(function(foodtype){
        foodtype.list.forEach(function(food){
          _this.eatfood.orderFormList.forEach(function(eat){
             if(food.id==eat.commodityNo)
             {
                eatedfood.push(food)
             }
          })
        })
        
      })
      this.eatedfood=eatedfood
      console.log(this.eatedfood)
    },*/
  _drop:function(target){
	    		this.$refs.shopcart.drop(target)
	    	},
  tospecif:function(food){
	    		if(food){
	    			this.specif=food
	    		}
	    		this.showspecif=!this.showspecif
	    	},      
  selectFoods:function(){
				var foodss=[];
				this.goods.forEach(function(good){
					good.list.forEach(function(food){
						food.listin.forEach(function(foodin){
							if(foodin.num>0){
							foodss.push(foodin);
						}
						})
					});
				});
				return foodss;
			}      
  },
  filters: {
        imgurl: function(value) {
            return 'http://www.dadu999.com'+value;
        }
    },  
    components:{
      change,
      shopcart,
      num,
      specif,
      vueLoading
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.eatwarp
  width 100%
  background #f3f5f7
  overflow auto
  p
    width 100%
    text-align center
    line-height 0.6rem
    font-size 0.3rem
    padding-top 0.1rem
    background white
  .eatcontent
    overflow auto
    background white
    padding-bottom 1rem
    box-sizing border-box
    ul
      padding 0.2rem 0
      background white
      overflow auto
      box-sizing border-box
      li.g-in-food
        padding 0.15rem
        margin 0.2rem
        padding-bottom 18px
        display flex
        border-bottom 1px solid rgba(7,17,27,0.1)
        &:last-child
          border-bottom 0px
          margin-bottom 0
        .g-in-icon
          flex 0 0 2rem 
          img
            width: 1.5rem;
            height: 1.5rem;
        .g-in-content
          flex 1
          position relative
          .g-in-name
            text-align left
            padding-left 0.2rem
            margin 2px 0 2px 0
            line-height 0.3rem
            font-size 0.35rem
            color rgb(7,17,27)
          .g-in-price
            font-weight 700
            position absolute
            bottom 0.05rem
            line-height 0.5rem
            text-align left
            padding-left 0.2rem
            span
              font-size 0.3rem 
          .cartwraper
            position absolute
            right 0
            bottom 0
            z-index 20
            .specif
              width 1rem
              position absolute
              right 0
              bottom 0
              height 0.5rem
              background #00a0dc
              font-size 0.23rem
              color white
              border-radius 0.5rem	           
              line-height 0.54rem
              font-weight 700
              i
                width 0.25rem
                height 0.25rem
                position absolute
                right -0.1rem
                top -0.1rem
                border-radius 50%
                color white
                line-height 0.2rem
                background #db2244
                font-weight 700
                font-size 0.2rem
  .dt-top
	    width 100%
	    height 0.8rem
	    text-align center
	    line-height 0.8rem
	    font-size 0.3rem
	    .back
	      position absolute
	      height 0.6rem
	      top 0.1rem
	      left 0.2rem
	      font-size 0.3rem
	      line-height 0.6rem
   .specif-enter-active,.specif-leave-active
    transition all 0.4s ease-in-out              
  .specif-enter,.specif-leave-to
    transform translateY(-100%);
  .specif-leave,.specif-enter-to
    transform translateY(0);       

.vue-loading
  overflow hidden   
</style>
